<!--人员交互页面-->
<template>
  <div
    ref="chart"
    style="margin: 0 auto; width: 600px; height:75ch;"
  />
</template>

<script>
import axios from 'axios'
import jquery from 'jquery'

export default {
  name: 'Interact',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

      var chartDom = this.$refs.chart
      var myChart = this.$echarts.init(chartDom)
      var option

      myChart.showLoading()
      jquery.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function(graph) {
        myChart.hideLoading()
        graph.nodes.forEach(function(node) {
          node.label = {
            show: node.symbolSize > 30
          }
        })
        option = {
          title: {
            text: '',
            subtext: '',
            top: 'bottom',
            left: 'right'
          },
          tooltip: {},
          legend: [
            {
              data: graph.categories.map(function(a) {
                return a.name
              })
            }
          ],
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              name: 'Les Miserables',
              type: 'graph',
              layout: 'circular',
              circular: {
                rotateLabel: true
              },
              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,
              roam: true,
              label: {
                position: 'right',
                formatter: '{b}'
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3
              }
            }
          ]
        }
        console.log(option)
        myChart.setOption(option)
      })
      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
